<template>
  <a-modal :title="title" :width="450" :visible="visible" :closable="false" :maskClosable="false">
    <template slot="footer">
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="selectOk">确认</a-button>
    </template>

    <a-form>
      <a-form-item
        v-if="isMultiTenant"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 20 }"
        style="margin-bottom:10px"
        :validate-status="validate_status1"
      >
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>您有多个租户，请选择登录租户</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="gold" />
        </a-tooltip>

        <a-select
          @change="handleTenantChange"
          :class="{ 'valid-error': validate_status1 == 'error' }"
          placeholder="请选择登录租户"
          style="margin-left:10px;width: 80%"
        >
          <a-icon slot="suffixIcon" type="gold" />
          <a-select-option v-for="d in tenantList" :key="d.id" :value="d.id">
            {{ d.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { queryTenantList } from './service.js'
import { USER_INFO, ACCESS_TOKEN } from '@/store/mutation-types'
import store from '@/store'
export default {
  name: 'LoginSelectTenant',
  data() {
    return {
      visible: false,

      isMultiTenant: false,
      tenantList: [],

      username: '',
      orgCode: '',
      tenant_id: '',

      validate_status1: '',
      validate_status2: ''
    }
  },
  computed: {
    title() {
      return '请选择租户'
    }
  },
  methods: {
    clear() {
      this.tenantList = []
      this.tenant_id = ''
      this.visible = false
      this.validate_status1 = ''
      this.validate_status2 = ''
    },
    bizTenant(ids, calback) {
      let that = this
      // if (!ids) {
      //   that.isMultiTenant = false
      //   that.tenant_id = 0
      //   calback()
      //   return;
      // }
      if (ids === '' || ids === null || ids == 0 || ids == undefined) {
        this.$message.error('用户未加入任何组织，请联系管理员进行配置!')
        Vue.ls.remove(ACCESS_TOKEN)
        that.isMultiTenant = false
        that.tenant_id = 0
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        })
        return false
      }
      ids = ids.trim(',')
      if (!ids || ids.length === 0) {
        that.isMultiTenant = false
        that.tenant_id = 0
        calback()
      } else {
        queryTenantList({ ids: ids }).then(res => {
          if (res.result) {
            that.tenantList = res.result.rows
            let length = that.tenantList.length
            if (length === 0) {
              that.isMultiTenant = false
              that.tenant_id = 0
            } else if (length === 1) {
              that.isMultiTenant = false
              that.tenant_id = this.tenantList[0].id
            } else {
              that.visible = true
              that.isMultiTenant = true
              that.tenantList = res.result.rows
            }
          }
          calback()
        })
      }
    },
    show() {
      let that = this
      that.clear()
      let user = Vue.ls.get(USER_INFO)
      that.username = user.username
      let ids = user.relTenantIds
      that.bizTenant(ids, function() {
        if (that.visible === false) {
          that.$store.dispatch('saveTenant', that.tenant_id)
          that.$store.dispatch('saveIsMultiTenant', that.isMultiTenant)
          that.$emit('success')
        }
      })
    },

    selectOk() {
      if (this.isMultiTenant && !this.tenant_id) {
        this.validate_status1 = 'error'
        return false
      }
      this.$store.dispatch('saveTenant', this.tenant_id)
      this.$store.dispatch('saveIsMultiTenant', this.isMultiTenant)
      this.$emit('success')
    },
    handleTenantChange(e) {
      this.validate_status1 = ''
      this.tenant_id = e
    },
    close() {
      this.visible = false
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped></style>
